<template>
  <ServerList />
  <router-view />
  <div class="me">
    <span style="position: absolute;left:5px;margin-top: 5px">
      <el-button class="cover"> </el-button>
    </span>

    <span style="position: absolute; right: 6px; margin-top: 6px">
      <el-button
        class="microphone"
        :class="{ micro_active: microOn }"
        @click="microOn = !microOn"
      ></el-button>
      <el-button
        class="headphone"
        :class="{ head_active: headOn }"
        @click="headOn = !headOn"
      ></el-button>
      <el-button class="set"> </el-button>
    </span>
  </div>
</template>

<style scoped>
.me {
  position: fixed;
  width: 235px;
  left: 70px;
  bottom: 0;
  height: 50px;
  background-color: #222225;
}
.microphone {
  background-image: url("../assets/microphone-off.png");
  background-size: 100%;
}
.micro_active {
  background-image: url("../assets/Microphone.png");
}
.headphone {
  background-image: url("../assets/headphone_off.png");
  background-size: 100%;
}
.head_active {
  background-image: url("../assets/headphone.png");
  background-size: 100%;
}
.set {
  background-image: url("../assets/set.png");
  background-size: 100%;
}
.cover {
  background-image: url("../assets/discord.png");
  background-size: 100%;
  border-radius: 19px;
  border: 0;
}
</style>
<script>
import ServerList from "@/components/channels/ServerList";

// import SessionList from "@/components/channels/SessionList";
// import Session from "@/components/channels/Session";
//import { useStore } from "vuex";
import { ref } from "vue";

export default {
  name: "Channels",
  components: {
    ServerList,
    // Session,
    // SessionList,
  },
  setup() {
    const microOn = ref(false);
    const headOn = ref(true);

    return {
      microOn,
      headOn,
    };
  },
};
</script>
